<template>
  <!-- MemberManage 会员管理 -->
  <PageContainer>
    <view class="container">
      <Header title="会员管理" v-model="headerHeight" :z-index="headerZindex">
        <UniSearchBar
          placeholder="请输入会员名称/手机号码"
          cancelButton="none"
          radius="35"
          bgColor="rgba(245, 245, 245, .3)"
          @confirm="searchFnc"
          @clear="restFnc"
        ></UniSearchBar>
      </Header>

      <YFilter
        :headerHeight="headerHeight"
        @submit="filterSubmit"
        :z-index="headerZindex"
      ></YFilter>

      <List
        :keyword="keyword"
        :filter-params="filterParams"
        @openSetPopup="(val: IMemberManageListResData) => handleOpenPopup(val)"
      />

      <image
        class="add"
        src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/floatIcon/add-icon.png"
        alt=""
        @click="handleAdd"
      />

      <SetPopup v-model="showPopup" :memberValue="memberValue" @close="handleClose" />
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  MemberManage  会员管理 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import { ref } from 'vue';
  import Header from '@/components/Header/index.vue';
  import UniSearchBar from '@/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue';
  import YFilter from './components/YFilter.vue';
  import List from './components/list.vue';
  import SetPopup from './components/SetPopup.vue';
  import { type IMemberManageListResData } from '@/api/admin/types';
  import { navigateTo } from '@/router';
  import { onPageScroll } from '@dcloudio/uni-app';

  const headerZindex = ref(999);
  const keyword = ref('');
  function searchFnc(e: { value: string }) {
    keyword.value = e.value;
  }
  function restFnc() {
    keyword.value = '';
  }
  const headerHeight = ref(0);

  const filterParams = ref({});
  function filterSubmit(params: { [x: string]: string | undefined }) {
    filterParams.value = params;
  }

  const showPopup = ref(false);

  const memberValue = ref<any>({});
  const handleOpenPopup = (val: IMemberManageListResData) => {
    headerZindex.value = 99;
    memberValue.value = val;
    showPopup.value = true;
  };

  const handleClose = () => {
    setTimeout(() => {
      headerZindex.value = 999;
    }, 300);
  };

  onPageScroll(() => {});

  const handleAdd = () => {
    navigateTo({ name: 'memberAdd' });
  };
</script>

<style lang="scss" scoped>
  .add {
    position: fixed;
    right: 40rpx;
    bottom: 560rpx;
    width: 108rpx;
    height: 108rpx;
  }

  ::v-deep {
    .uni-searchbar {
      // position: fixed !important;
      width: 100%;
      background: #fff;
      // z-index: 6;
      box-sizing: border-box;

      .uni-searchbar__box {
        background-color: #f5f5f5 !important;
      }
    }

    // .tui-dropdown-box {
    //   z-index: 5 !important;
    // }

    // .tui-dropdown-mask {
    //   z-index: 4 !important;
    // }
  }
</style>
